 
import { CCUtils } from "../Framework/scripts/CCUtils";
import ObjectPool from "../Framework/scripts/ObjectPool";
import Watcher from "../Framework/scripts/Watcher";

const { ccclass, property } = cc._decorator;

@ccclass
export default class Menu extends cc.Component {


    @property(cc.Node)
    content: cc.Node = null;
    content_layout: cc.Layout = null;

    @property(cc.Node)
    drag: cc.Node = null;

    @property()
    set refresh(_: boolean) {
        const content = this.content;
        let widget = content.getComponent(cc.Widget);
        let offset = widget.top;
        content.height = 180 + 20 + content.childrenCount * 180 + (content.childrenCount - 1) * 20;
        widget.top = offset;
    }
    get refresh() { return false; }

    src: cc.Vec2;
    start() {
        this.src = this.node.getPosition();

        this.content_layout = this.content.getComponent(cc.Layout);
        Watcher.addEventListener("show_menu", this, this.show);
        Watcher.addEventListener("hide_menu", this, this.hide);

        //this.node.active = false;


    }

    onEnable() {
        if (this.drag) {
            this.drag.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        }
    }
    onDisable() {
        if (this.drag) {
            this.drag.off(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        }
    }

    onTouchMove(touchEvent) {

        let location = touchEvent.getLocation();
        let pos: cc.Vec2 = this.node.parent.convertToNodeSpaceAR(location, location);
        pos = pos.subSelf(this.drag.position);

        let offset = pos.subSelf(this.src);
        offset.x = Math.floor(offset.x / 100) * 100;
        offset.y = Math.floor(offset.y / 100) * 100;

        this.node.position = this.src.add(offset)// 确定位置
    }


    show(list) {
        const content = this.content;
        const pool = ObjectPool.instance;

        const children = content.children;
        const childrenCount = content.childrenCount;
        for (let i = 0; i < childrenCount; i++) {
            pool.despawn(children[0]);
        }

        if (typeof list[0] == 'string') {

            for (let e of list) {
                let inst = pool.spawn("editor_menu_item");
                inst.children[0].active = false;
                inst.children[1].active = true;
                inst.children[1].getComponent(cc.Label).string = e;
                content.addChild(inst);

                const btn = inst.getComponent(cc.Button);
                if (btn.clickEvents.length == 0) {
                    CCUtils.RegistHandler(this.node, "Menu", "clickEvent", btn);
                }
            }
        }
        else {
            for (let e of list) {
                let inst = pool.spawn("editor_menu_item");
                inst.children[0].active = true;
                inst.children[1].active = false;
                inst.children[0].getComponent(cc.Sprite).spriteFrame = e;
                content.addChild(inst);

                const btn = inst.getComponent(cc.Button);
                if (btn.clickEvents.length == 0) {
                    CCUtils.RegistHandler(this.node, "Menu", "clickEvent", btn);
                }
            }
        }

        content.height = 90 + content.childrenCount * 180 + (content.childrenCount - 1) * 20;
        this.content_layout.updateLayout();
    }

    hide() {
        this.node.active = false;
    }

    clickEvent(e: cc.Event.EventTouch) {

        let item: any;
        if (e.currentTarget.children[0].active) {
            item = e.currentTarget.children[0].getComponent(cc.Sprite).spriteFrame;
        }
        else {
            item = e.currentTarget.children[1].getComponent(cc.Label).string;
        }

        console.log(`choose menu item : ${item}`);
        Watcher.dispatch("click_menu", item);
    }

    // update (dt) {}
}
